<template>
  <el-table
    :data="tableData"
    stripe
    style="width: 100%"
  >

    <el-table-column
      prop="date"
      label="创建日期"
      sortable
      width="100"
      align="center"
    >
    </el-table-column>
    <el-table-column
      prop="id"
      label="订单编号"
      width="130"
      align="center"
    >
    </el-table-column>
    <el-table-column
      prop="goodsName"
      label="货物名"
      width="100"
      align="center"
    >
    </el-table-column>
    <el-table-column
      prop="amount"
      label="货物数量"
      sortable
      width="100"
      align="center"
    >
    </el-table-column>
    <el-table-column
      prop="price"
      label="货物价格(元)"
      sortable
      width="150"
      align="center"
    >
    </el-table-column>

    <el-table-column
      prop="producerName"
      label="生产商"
      width="80"
      align="center"
    >
    </el-table-column>
    <el-table-column
      prop="address"
      label="生产商地址"
      width="240"
      align="center"
    >
    </el-table-column>

    <el-table-column
      label="收货与否"
      align="center"
    >
      <template>
        <el-button
          size="mini"
          @click="ensure"
        >确认收货</el-button><br>
        <div style="margin:10px 0"></div>
        <el-button
          size="mini"
          type="danger"
          @click="cancel"
        >撤销订单</el-button>
      </template>
    </el-table-column>

  </el-table>
</template>

<script>
export default {
  name: "Detail",
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          id: "1290120121121",
          goodsName: "text",
          amount: 19,
          price: 1291,
          producerName: "王小虎",
          address: "上海市普陀区金沙江路",
        },
        {
          date: "2016-06-02",
          id: "1290120121121",
          goodsName: "text",
          amount: 39,
          price: 121,
          producerName: "王小虎",
          address: "上海市普陀区金沙江路",
        },
        {
          date: "2016-01-02",
          id: "1290120121121",
          goodsName: "text",
          amount: 29,
          price: 1290,
          producerName: "王小虎",
          address: "上海市普陀区金沙江路",
        },
      ],
    };
  },
  methods: {
    cancel() {
      this.$confirm("此操作将撤销订单, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "撤销成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消撤销",
          });
        });
    },
     ensure() {
        const h = this.$createElement;
        this.$msgbox({
          type: "success",
          title: '确认收货',
          message: h('p', null, [
            h('span', null, '是否确认收货'),
          ]),
          showCancelButton: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          beforeClose: (action, instance, done) => {
            if (action === 'confirm') {
              instance.confirmButtonLoading = true;
              instance.confirmButtonText = '执行中...';
              setTimeout(() => {
                done();
                setTimeout(() => {
                  instance.confirmButtonLoading = false;
                }, 30);
              }, 100);
            } else {
              done();
            }
          }
        }).then(action => {
          this.$message({
            type: 'success',
            message: '收货成功',
          });
        });
      }
  },
};
</script>

<style>
</style>